<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-static-top">
  <div class="container">
    <!-- Branding Image -->
    <a class="navbar-brand " href="{% route 'root' %}">
      GinBBS
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Left Side Of Navbar -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item{% ifequal route_path '/topics' %} active{% endifequal %}"><a class="nav-link" href="{% route 'topics.index' %}">话题</a></li>
        <li class="nav-item{% ifequal route_path '/categories/show/1' %} active{% endifequal %}"><a class="nav-link" href="{% route 'categories.show' 1 %}">分享</a></li>
        <li class="nav-item{% ifequal route_path '/categories/show/2' %} active{% endifequal %}"><a class="nav-link" href="{% route 'categories.show' 2 %}">教程</a></li>
        <li class="nav-item{% ifequal route_path '/categories/show/3' %} active{% endifequal %}"><a class="nav-link" href="{% route 'categories.show' 3 %}">问答</a></li>
        <li class="nav-item{% ifequal route_path '/categories/show/4' %} active{% endifequal %}"><a class="nav-link" href="{% route 'categories.show' 4 %}">公告</a></li>
      </ul>

      <!-- Right Side Of Navbar -->
      <ul class="navbar-nav navbar-right">
        <!-- Authentication Links -->
        {% if currentUserData %}
          <li class="nav-item">
            <a class="nav-link mt-1 mr-3 font-weight-bold" href="{% route 'topics.create' %}">
              <i class="fa fa-plus"></i>
            </a>
          </li>
          <li class="nav-item notification-badge">
            <a class="nav-link mr-3 badge badge-pill badge-{% ifequal currentUserData.NotificationCount 0 %}secondary{% else %}hint{% endifequal %} text-white"
              href="{% route 'notifications.index' %}">
              {{ currentUserData.NotificationCount }}
            </a>
          </li>
          <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <img src="{{ currentUserData.Avatar }}" class="img-responsive img-circle" width="30px" height="30px">
                {{ currentUserData.Name }}
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="{% route 'users.show' currentUserData.ID %}">
                  <i class="far fa-user mr-2"></i>
                  个人中心
                </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="{% route 'users.edit' currentUserData.ID %}">
                  <i class="far fa-edit mr-2"></i>
                  编辑资料
                </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" id="logout" href="#">
                  <form action="{% route 'logout' %}" method="POST" onsubmit="return confirm('您确定要退出吗？');">
                    {{ csrfInput | safe }}
                    <button class="btn btn-block btn-danger" type="submit" name="button">退出</button>
                  </form>
                </a>
              </div>
            </li>
        {% else %}
          <li class="nav-item"><a class="nav-link" href="{% route 'login' %}">登录</a></li>
          <li class="nav-item"><a class="nav-link" href="{% route 'register' %}">注册</a></li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>
